<template>
    <div class="loginContainer">
        <div class="left">
            <h1>
                注册新账号 <br />
                GROUP FOUR在线书城
            </h1>
            <p>
                已有账号？
                <el-button link type="primary" @click="$router.replace({ name: 'login' })">点此登录</el-button>
            </p>
        </div>
        <div class="right">
            <el-form :model="form" label-width="6rem" ref="registerForm" class="registerForm" :rules="rules">
                <el-form-item prop="username">
                    <el-input
                        clearable
                        :prefix-icon="userIcon"
                        placeholder="请输入用户名"
                        v-model="form.username"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        clearable
                        :show-password="true"
                        placeholder="请输入密码"
                        v-model="form.password"
                        type="password"
                        :prefix-icon="lockIcon"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="checkPassword">
                    <el-input
                        clearable
                        :show-password="true"
                        placeholder="请再次输入密码"
                        v-model="form.checkPassword"
                        type="password"
                        :prefix-icon="lockIcon"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="sex">
                    <el-radio-group v-model="form.sex">
                        <el-radio label="男" name="sex" value="男" border></el-radio>
                        <el-radio label="女" name="sex" value="女" border></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item prop="telephone">
                    <el-input
                        clearable
                        placeholder="请输入手机号"
                        v-model="form.telephone"
                        :prefix-icon="phoneIcon"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="email">
                    <el-input
                        clearable
                        placeholder="请输入邮箱（选填）"
                        v-model="form.email"
                        :prefix-icon="mailIcon"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="registerHandler" block>注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
// @ is an alias to /src
import store from "@/store/index";
import service from "@/utils/request";
import { ElMessage } from "element-plus";
import { User, Lock, Phone, Message } from "@element-plus/icons-vue";
import { markRaw } from "vue";

export default {
    name: "RegisterView",
    data() {
        return {
            form: {
                username: "",
                password: "",
                checkPassword: "",
                sex: "",
                telephone: "",
                email: "",
            },
            userIcon: markRaw(User),
            lockIcon: markRaw(Lock),
            phoneIcon: markRaw(Phone),
            mailIcon: markRaw(Message),
            rules: {
                username: [
                    { required: true, message: "用户名不能为空" },
                    { min: 2, max: 20, message: "用户名应在2-20个字符之间" },
                ],
                password: [
                    { required: true, message: "密码不能为空" },
                    { min: 3, message: "密码至少为3位" },
                ],
                checkPassword: {
                    required: true,
                    validator: (rule, value, callback) => {
                        if (value === "") {
                            callback(new Error("请确认密码"));
                        } else if (value !== this.form.password) {
                            callback(new Error("两次输入密码不一致"));
                        } else {
                            callback();
                        }
                    },
                    trigger: "blur",
                },
                sex: { required: true, message: "请选择性别" },
                telephone: {
                    required: true,
                    validator: (rule, value, callback) => {
                        if (value === "") {
                            callback(new Error("请输入手机号"));
                        } else if (
                            !value.match(/^(13[0-9]|14[01456789]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/)
                        ) {
                            callback(new Error("手机号格式有误"));
                        } else {
                            callback();
                        }
                    },
                },
                email: {
                    validator: (rule, value, callback) => {
                        if (!value.match(/^\w+@[a-z0-9]+.[a-z]{2,4}$/) && value !== "") {
                            callback("邮箱格式有误");
                        } else {
                            callback();
                        }
                    },
                },
            },
        };
    },
    methods: {
        registerHandler() {
            this.$refs.registerForm.validate((valid) => {
                if (valid) {
                    service({
                        method: "post",
                        url: "/user/saveUser",
                        headers: {
                            "Content-type": "application/json",
                        },
                        data: {
                            ...this.form,
                            isAdmin: 0,
                            userState: 1,
                        },
                    })
                        .then((res) => {
                            ElMessage({
                                type: "success",
                                message: "注册成功，正在跳转登录页",
                            });
                            setTimeout(() => {
                                this.$router.replace({ name: "login" });
                            }, 200);
                            // console.log(res);
                        })
                        .catch((err) => {
                            ElMessage({
                                type: "error",
                                message: "账号已经存在",
                            });
                        });
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.loginContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 65vh;
    width: 70%;
    padding: 0 2rem;
    margin: 0 auto;

    .left {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 3rem;
        padding: 5rem 0;

        p > .el-button {
            font-weight: bold;
            transition: 0.3s;
        }

        p > .el-button:hover {
            text-decoration: underline;
        }
    }

    .left > h1::before {
        content: "";
        position: absolute;
        top: 15%;
        left: 0;
        width: 14rem;
        height: 8rem;
        background: linear-gradient(to right, var(--el-color-primary), #c471ed, #f64f54);
        z-index: -1;
        filter: blur(70px);
    }

    .right {
        flex: 1;

        .registerForm {
            line-height: 3rem;

            .el-input {
                width: 100%;
                height: 40px;
            }

            .el-radio-group > .el-radio {
                height: 40px;
            }
        }
    }
}
</style>
